import React from 'react';
import { Layout, Menu } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom'

import css from './index.less';

const { Header, Sider, Content } = Layout;

class Index extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    toUser = (key) => {
        switch (key) {
            case 'user':
                this.props.history.push({ pathname: '/index/user' })
                break;
            case 'image':
                this.props.history.push({ pathname: '/index/image' })
                break;
            default:
                console.log('未知路由');
        }
        
    }

    render() {
        return (
            <Layout className={css.body}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className={css.logo} />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1" icon={<UserOutlined />} onClick={(e) => { this.toUser('user') }} >
                            用户管理
                </Menu.Item>
                        <Menu.Item key="2" icon={<VideoCameraOutlined />} onClick={(e) => { this.toUser('image') }}>
                            图片管理
                </Menu.Item>
                        <Menu.Item key="3" icon={<UploadOutlined />} onClick={(e) => { this.toUser('user') }}>
                            nav 3
                </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className={css.site_layout}>
                    <Header className={css.site_layout_background} style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: css.trigger,
                            onClick: this.toggle,
                        })}
                    </Header>
                    {<Content
                        className={css.site_layout_background}
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        {this.props.children}
                    </Content>}
                </Layout>
            </Layout>
        );
    }
};


export default withRouter(Index);
